<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <cell-group>
      <cell title="单元格" value="内容" />
      <cell title="单元格" value="内容" />
      <cell title="单元格" value="内容" />
    </cell-group>

    <div class="ui-title">导航</div>
    <cell title="实名认证" value="张三" link line />
    <cell title="手机号" value="181********99" link line />
    <cell title="邮箱" value="252***@qq.com" link line />
    <cell title="会员名" value="zhangsan" link />

    <div class="ui-title">自定义图标（单行）</div>
    <cell title="购物" link>
      <img
        style="width: 25px; margin-right: 12px"
        slot="left-icon"
        src="https://www.qiniu.lingchen.kim/gouwu.png"
      />
    </cell>

    <div class="ui-title">自定义图标（多行）</div>
    <cell-group class="cell-group-icon">
      <cell title="公益" link>
        <img
          class="icon"
          slot="left-icon"
          src="https://www.qiniu.lingchen.kim/hezuo.png"
        />
      </cell>
      <cell title="私信" link>
        <img
          class="icon"
          slot="left-icon"
          src="https://www.qiniu.lingchen.kim/sixin.png"
        />
      </cell>
      <cell title="预约" link>
        <img
          class="icon"
          slot="left-icon"
          src="https://www.qiniu.lingchen.kim/gouwu.png"
        />
      </cell>
      <cell title="草稿箱" link>
        <img
          class="icon"
          slot="left-icon"
          src="https://www.qiniu.lingchen.kim/caogaoxiang.png"
        />
      </cell>
      <cell title="云服务" link>
        <img
          class="icon"
          slot="left-icon"
          src="https://www.qiniu.lingchen.kim/yun.png"
        />
      </cell>
    </cell-group>

    <div class="ui-title">卡片风格</div>
    <cell-group :radius="10" width="95%">
      <cell title="单元格" link />
      <cell title="单元格" link />
      <cell title="单元格" link />
    </cell-group>

    <div class="ui-title">自定义样式</div>
    <cell
      title="自定义"
      value="内容"
      radius="8px"
      link
      style="width: 95%; height: 45px"
    />
  </div>
</template>

<script>
import CellGroup from "../../components/cell-group";
import Cell from "../../components/cell";
export default {
  components: {
    CellGroup,
    Cell,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 20px;

  .cell-group-icon {
    .icon {
      width: 26px;
      margin-right: 12px;
    }
  }

  .iconfont {
    margin-right: 12px;
    font-size: 22px;
  }
}
</style>